<template>
	<view style="display: flex;flex-direction: column;height: 100%;">
		<view class="top_btn">
			<view class=""><view class="btn" @tap="toPage2('/pages/Console/Calculate/listTab')" style="margin: 0;">{{$t("index.sycs")}}</view></view>
			<view style="display: flex;align-items: center;justify-content: space-between;">
				<view class="btn" @tap="OneKey('clear', -1)">{{$t("yjqk")}}</view>
				<view class="btn btn2" @tap="OneShow">
					<u-icon :name="Console_value ? 'yanjing' : 'yanjingbiyan'" custom-prefix="custom-icon" size="28" style="margin-right:10rpx;"></u-icon>
					<text>{{$t("ywc")}}</text>
				</view>
			</view>
		</view>
		<view class="cell">
			<view style="flex: 1;overflow: auto;">
				<mescroll-uni :fixed="false" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<view
						class="cell_list"
						@tap="cell_switch(index, item.executeStatus, item)"
						:class="{ cell_list_active: cell_list_index == index, cell_list_active2: cell_list_index == index && item.executeStatus == 5 }"
						v-for="(item, index) in pageData"
						:key="index"
					>
						<view class="cell_item_top">
							<view class="left">
								<u-icon name="you" custom-prefix="custom-icon" size="20"></u-icon>
								<view class="celid">
									<view class="label">{{$t("clid")}}</view>
									<text class="text">{{ item.tacticsId }}</text>
								</view>
								<view class="zkaicelid">{{$t("clid")}}:{{ item.tacticsId }}</view>
							</view>
							<view class="item">
								<view class="label">{{$t("ysxsy")}}</view>
								<text class="text" :class="{ red: item.realizedRewardTotalFlag == 2 }">{{ item.realizedRewardTotal }}</text>
							</view>
							<view class="right">
								<view class="label">{{$t("yjyk")}}</view>
								<text class="text" :class="{ red: item.predictProfitLossFlag == 2 }">{{ item.predictProfitLoss }}</text>
							</view>
							<view class="zktips">{{ item.assetType }}</view>
						</view>
						<view class="cell_item_list">
							<view class="item">
								<view class="label">{{$t("zsy")}}</view>
								<view class="text" :class="{ red: item.profitTotalFlag == 2 }">{{ item.profitTotal }}</view>
							</view>
							<view class="item">
								<view class="label">{{$t("yjyk")}}</view>
								<view class="text" :class="{ red: item.predictProfitLossFlag == 2 }">{{ item.predictProfitLoss }}</view>
							</view>
							<view class="item">
								<view class="label">{{$t("dqcw")}}</view>
								<view class="text black">{{ item.keepMoney }}</view>
							</view>
						</view>
						<view class="cell_item_list list_active">
							<view class="item">
								<view class="label">{{$t("cllx")}}</view>
								<view class="text black" v-if="item.strategyType == 'STEADY'">{{ $t("bsx") }}</view>
								<view class="text black" v-if="item.strategyType == 'RADICAL'">{{ $t("jjx") }}</view>
								<view class="text black" v-if="item.strategyType == 'RISK_CONTROL_STEADY'">{{ $t("fkbs") }}</view>
								<view class="text black" v-if="item.strategyType == 'RISK_CONTROL_RADICAL'">{{ $t("fkjj") }}</view>
							</view>
							<view class="item">
								<view class="label">{{$t("bzjl")}}</view>
								<view class="text black">{{ item.marginRate }}</view>
							</view>
							<view class="item">
								<view class="label">{{$t("ylhzxh")}}</view>
								<view class="text black">{{ item.transferAmount }}</view>
							</view>
						</view>
						<view class="list_exchangeCoins" v-for="(list, index) in item.exchangeCoins" :key="index">
							<view class="item">
								<image class="img" :src="`/static/bizhong/${list.exchangeCoin}.png`"></image>
								<text class="label" style="margin: 0;">{{ list.exchangeCoin }}</text>
							</view>
							<view class="item">
								<view class="label">{{$t("dqjg")}}</view>
								<text class="text blue">{{ list.lastPrice }}</text>
							</view>
							<view class="item">
								<view class="label">{{$t("sxsy")}}</view>
								<text class="text" :class="{ red: list.realizedRewardFlag == 2 }">{{ list.realizedReward }}</text>
							</view>
						</view>
						<view class="cell_item_btn">
							<view class="left">{{$t("dqzt")}}</view>
							<view class="right">
								<view class="btn bgred" v-if="item.contractStatus == 1">{{ $t("dqd") }}</view>
								<view class="btn bgred" v-if="item.contractStatus == 2">{{ $t("zxz") }}</view>
								<view class="btn bgred" v-if="item.contractStatus == 4">{{ $t("apiyc") }}</view>
								<view class="btn bgred" v-if="item.contractStatus == 5">{{ $t("ywc") }}</view>
								<view class="btn bgred" v-if="item.contractStatus == 30">{{ $t("yebz") }}</view>
								<view class="btn bgred" v-if="item.contractStatus == 31">{{ $t("jysyebzzt") }}</view>
								<view class="btn" v-if="item.contractStatus == 4" @tap.stop="StopNow(5, item)">{{$t("ljqd")}}</view>
								<!-- API异常 -->
							</view>
						</view>
						<view class="cell_item_btn cell_item_btn2">
							<view class="left">{{ item.tacticsType == 2 ? $t("yqdxh") : $t("ygbxh") }}</view>
							<!-- 已完成 -->
							<view class="right" v-if="item.contractStatus == 5">
								<view class="btn btn_color1" @tap.stop="toPage(`/pages/Console/RobotShock/SetupShock/SetupShock?id=${item.tacticsId}`)">{{$t("gdsz")}}</view>
							</view>
							<!-- 已完成 -->
							<!-- 执行中/API异常 -->
							<view class="right" v-else>
								<view class="btn btn_color1" @tap.stop="toPage(`/pages/Console/RobotShock/SetupShock/SetupShock?id=${item.tacticsId}`)">{{$t("gdsz")}}</view>
								<view class="btn btn_color2" @tap.stop="OneKey('clear', item.tacticsId)">{{$t("yjmc")}}</view>
								<view class="btn btn_color3" @tap.stop="StopNow(3, item)">{{ item.tacticsType == 2 ? $t("gbxh") : $t("kqxh") }}</view>
							</view>
							<!-- 执行中 -->
						</view>
					</view>
				</mescroll-uni>
			</view>
			<view class="cell_Tre">
				<u-icon name="gengduo" custom-prefix="custom-icon" size="28" @tap="toPage(`/pages/Console/ConRecord/ConRecord?tacticsId=${tacticsId}`)"></u-icon>
				<text class="text" @tap="toPage('/pages/Console/ConRecord/ConRecord?tacticsId='+tacticsId+'&name='+(pageData.length ? pageData[0].exchangeName : 'BINANCE'))">{{$t('jyjl')}}</text>
			</view>
		</view>
		<view class="cell_puls">
			<u-icon name="jia" @tap="toPage('/pages/Console/RobotShock/RobotShock')" custom-prefix="custom-icon" size="35"></u-icon>
			<text class="text" @tap="toPage('/pages/Console/RobotShock/RobotShock')">{{$t("tjjyd")}}</text>
		</view>
		<u-popup v-model="show" mode="center" class="popup" z-index="5">
			<view class="pop_nr">
				<image class="img" src="/static/user_bg.png"></image>
				<view class="pop_nr_block">
					<view class="title" v-if="type == 5"><text>{{$t("qrqdcz")}}</text></view>
					<view class="title" v-if="type == 3">
						<view v-if="pageData_index.tacticsType == 1">{{$t("qrkqclxhcz")}}</view>
						<view v-else>{{$t("qryjcgcdcm")}}</view>
					</view>
					<view class="title" v-if="type == 9">{{$t("qryjmcsyccm")}}</view>
					<view class="pop_nr_btn">
						<view class="btn" @tap="OneStrategy"><text>{{$t("queren")}}</text></view>
						<view class="btn btn2" @tap="show = false"><text>{{$t("quxiao")}}</text></view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="show2" mode="center" class="popup" z-index="5">
			<view class="pop_nr">
				<image class="img" src="/static/user_bg.png"></image>
				<view class="pop_nr_block">
					<view class="title" v-if="type2 == 'open'">{{$t("qryjqdsyclm")}}</view>
					<view class="title" v-if="type2 == 'clear'">
						{{$t("bcqkg")}}
						<text v-if="checkClearProfit.profitType == 0">{{$t("yingli")}}</text>
						<text v-else>{{$t("kuisun")}}</text>
						{{ '  ' + checkClearProfit.profitTotal }},{{$t("sfqbqk")}}
					</view>
					<view class="pop_nr_btn">
						<view class="btn" @tap="OneKey_ok"><text>{{$t("queren")}}</text></view>
						<view class="btn btn2" @tap="show2 = false"><text>{{$t("quxiao")}}</text></view>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- liao -->
		<view class="scroll">
			<view class="scroll_item1"></view>
			<view class="scroll_item2"></view>
		</view>
		<!-- liao -->
		<!-- 支付密码输入弹窗 -->
		<tom-pwd v-if="showPwd" @cancel="showPwd = false" @confirm="confirm"></tom-pwd>
		<tom-pwd v-if="showPwd2" @cancel="showPwd2 = false" @confirm="confirm2"></tom-pwd>
		<u-modal :title="$t('tishi')" :confirmText="$t('queding')" :cancelText="$t('quxiao')" v-model="show_modal">
			<view style="text-align: center;margin: 30rpx 30rpx;">{{ special_text }}</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			cell_list_index: null,
			show: false,
			type: 0,
			show2: false,
			type2: '',
			pageData: [],
			pageData_index: {},
			id: null,
			showPwd: false,
			showPwd2: false,
			special_text: '哈哈哈哈',
			show_modal: false,
			kg: '',
			Console_value: false,
			tacticsId: '',
			clearTacticsId : '',
			checkClearProfit: {}
		};
	},
	onHide() {
		this.show = false;
	},
	filters: {
		/*
		 *	策略状态
		 */
		formStatus(val) {
			if (val == 1) return this.$t("dqd");
			if (val == 2) return this.$t("zxz");
			if (val == 4) return this.$t("apiyc");
			if (val == 5) return this.$t("ywc");
			if (val == 30) return this.$t("yebz");
			if (val == 31) return this.$t("jysyebzzt");
		},
		formStrategyType(val) {
			if (val == 'STEADY') return this.$t("bsx");
			if (val == 'RADICAL') return this.$t("jjx");
			if (val == 'RISK_CONTROL_STEADY') return this.$t("fkbs");
			if (val == 'RISK_CONTROL_RADICAL') return this.$t("fkjj");
		}
	},
	methods: {
		downCallback() {
			this.mescroll.resetUpScroll();
		},
		/*
		 *	页面数据
		 */
		upCallback(page) {
			this.$api.consoleApi
				.shock_console({
					page: page.num,
					isHide: !this.Console_value
				})
				.then(res => {
					let list = res.data || [];
					this.mescroll.endSuccess(list.length);
					if (page.num == 1) this.pageData = []; //如果是第一页需手动制空列表
					this.pageData = this.pageData.concat(list); //追加新数据
				}).catch(res =>{
					this.pageData = [];
					this.mescroll.endSuccess(0);
				})
		},
		OneShow() {
			this.Console_value = !this.Console_value;
			this.mescroll.resetUpScroll();
			this.tacticsId = '';
			this.cell_list_index = null;
		},
		/*
		 *展开策略详情
		 */
		cell_switch(index, type, info) {
			var that = this;
			if (this.cell_list_index != index) {
				this.cell_list_index = index;
				this.tacticsId = info.tacticsId;
				this.$nextTick(() => {
					this.scroll_active = true;
				});
			} else {
				this.cell_list_index = null;
				this.tacticsId = '';
			}
		},
		/*
		 *页面跳转
		 */
		toPage(link) {
			this.$api.consoleApi
				.getContractRobotOpenPage({getCode : 'check'})
				.then(res => {
					if(res.errMsg){
						uni.showToast({
							title: res.errMsg,
							duration: 1000,
							icon: 'none'
						});
					}else{
						uni.navigateTo({
							url: link
						});
					}
				})
				.catch(res => {
					console.log('catch=' + res);
				});
		},
		/*
		 *页面跳转2
		 */
		toPage2(link) {
			uni.navigateTo({
				url: link
			});
		},
		/*
		 *弹窗操作
		 */
		StopNow(type, info, kg, qdtz) {
			this.type = type;
			this.kg = kg;
			this.show = true;
			this.pageData_index = info;
			if (info) {
				this.id = info.tacticsId;
			}
		},
		/*
		 *	一键策略操作/确定
		 */
		OneStrategy() {
			this.showPwd = true;
		},
		/*
		 *	一键策略操作/确定/密码输入完
		 */
		confirm(e) {
			if (this.type == 3) {
				/*循环*/
				this.$api.consoleApi
					.shock_saveContractTacticsOperate({
						type: '3', //1关闭 2启动
						tacticsId: this.id,
						transferPassword: e
					})
					.then(res => {
						this.showPwd = false;
						this.show = false;
						this.$utils.toast(this.$t("czcg"));
						this.mescroll.resetUpScroll();
						uni.hideLoading();
					})
					.catch(res => {
						this.showPwd = false;
						this.show = false;
						uni.hideLoading();
					});
			} else if (this.type == 5) {
				this.$api.consoleApi
					.shock_saveContractRobotStartOrStop({
						status: '2', //1关闭 2启动
						tacticsId: this.id,
						transferPassword: e
					})
					.then(res => {
						this.showPwd = false;
						this.show = false;
						this.$utils.toast(this.$t("czcg"));
						this.mescroll.resetUpScroll();
						uni.hideLoading();
					})
					.catch(res => {
						this.showPwd = false;
						this.show = false;
						uni.hideLoading();
					});
			}
		},
		
		/**
		 * 一键卖出或一键清空时,返回预计盈亏(按策略单条操作)
		 */
		OneKey(type, tacticsId) {
			if (this.pageData.length) {
				uni.showLoading({
					title: this.$t("loading.title"),
					mask: true
				});
				this.$api.consoleApi
					.shock_checkClearProfit({
						tacticsId : tacticsId
					})
					.then(res => {
						if (tacticsId == -1) {
							this.clearTacticsId = '';
						} else {
							this.clearTacticsId = tacticsId;
						}
						this.checkClearProfit = res.data;
						this.type2 = type;
						this.show2 = true;
						uni.hideLoading();
					})
					.catch(res => {
						uni.hideLoading();
					});
			} else {
				this.$refs.uToast.show({
					title: this.$t("zwsj"),
					type: 'warning'
				});
			}
		},
		/*
		 *一键清空/确认
		 */
		OneKey_ok() {
			this.showPwd2 = true;
		},
		/*
		 *一键清空/确认/密码输入完
		 */
		confirm2(e) {
			uni.showLoading({
				title: this.$t("loading.title"),
				mask: true
			});
			this.$api.consoleApi
				.shock_saveOneKeyOperate({
					tacticsId: this.clearTacticsId,
					type: 'clear',
					transferPassword: e
				})
				.then(res => {
					this.showPwd2 = false;
					this.show2 = false;
					this.show_modal = true;
					this.special_text = res.data;
					this.mescroll.resetUpScroll();
					uni.hideLoading();
				})
				.catch(res => {
					this.showPwd2 = false;
					this.show2 = false;
					this.$utils.toast(res);
					uni.hideLoading();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.Data_tab {
	display: flex;
	padding: 18rpx $nr-padd;
	.item {
		font-size: 32rpx;
		margin-right: 40rpx;
		color: $tom-text-sub-color2;
		position: relative;
	}
	.item1 {
		color: $text-color;
		font-weight: bold;
	}
	.item1::before {
		content: '';
		position: absolute;
		bottom: -12rpx;
		left: 0rpx;
		width: 100%;
		height: 4rpx;
		background-color: $text-color;
	}
}
.top_btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	.btn {
		font-size: 24rpx;
		color: $text-color;
		background-color: #fff;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		margin-left: 20rpx;
		box-shadow: $tom-block-shadow;
	}
	.btn2 {
		color: $tom-text-sub-color;
	}
}
.cell {
	background-color: #fff;
	margin: 0px $nr-padd;
	border-radius: 20rpx;
	box-shadow: $tom-block-shadow;
	flex: 1;
	overflow: auto;
	display: flex;
	flex-direction: column;
	.cell_list {
		height: 140rpx;
		transition: 0.4s;
		overflow: hidden;
		border-bottom: 10rpx solid $page-bg;
		.cell_item_top {
			height: 140rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0rpx $nr-padd;
			font-weight: bold;
			.left {
				width: 100%;
				display: flex;
				align-items: baseline;
				.celid {
					margin-left: 10rpx;
					.label {
						font-size: 28rpx;
						color: $tom-text-color;
						margin-bottom: 16rpx;
					}
					.text {
						font-size: 28rpx;
						color: #6699ff;
					}
				}
				.zkaicelid {
					display: none;
				}
			}
			.item {
				text-align: center;
				width: 100%;
				.label {
					font-size: 28rpx;
					color: $tom-text-color;
					margin-bottom: 16rpx;
				}
				.text {
					font-size: 28rpx;
					color: $tom-text-green;
				}
			}
			.right {
				text-align: right;
				width: 100%;
				.label {
					font-size: 28rpx;
					color: $tom-text-color;
					margin-bottom: 16rpx;
				}
				.text {
					font-size: 28rpx;
					color: $tom-text-green;
				}
			}
			.zktips {
				display: none;
			}
		}
		.cell_item_list {
			display: none;
			justify-content: space-between;
			padding: 10rpx $nr-padd $nr-padd $nr-padd;
			.item {
				text-align: center;
				width: 100%;
				font-weight: bold;
				.label {
					font-size: 28rpx;
					color: $tom-text-color;
					margin-bottom: 16rpx;
				}
				.text {
					font-size: 26rpx;
					color: $tom-text-green;
					font-weight: 400;
				}
			}
			// .item:nth-child(2) {
			// 	text-align: center;
			// }
			// .item:nth-child(3) {
			// 	text-align: right;
			// }
		}
		.list_active {
			margin-top: 10rpx;
			margin-bottom: 0rpx;
			border-bottom: 10rpx solid $page-bg;
		}
		.list_exchangeCoins {
			display: none;
			justify-content: space-between;
			padding: $nr-padd;
			border-bottom: 10rpx solid $page-bg;
			.item {
				width: 100%;
				font-weight: bold;
				color: $tom-text-color;
				.img {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
					border-radius: 60rpx;
				}
				.label {
					font-size: 28rpx;
					color: $tom-text-color;
					margin-bottom: 16rpx;
				}
				.text {
					font-size: 28rpx;
					color: $tom-text-green;
				}
			}
			.item:nth-child(1) {
				display: flex;
				align-items: center;
			}
			.item:nth-child(2) {
				text-align: center;
			}
			.item:nth-child(3) {
				text-align: right;
			}
		}
		.cell_item_btn {
			display: none;
			align-items: center;
			padding: $nr-padd $nr-padd 0 $nr-padd;
			.left {
				min-width: 160rpx;
				font-size: 28rpx;
				color: $tom-text-color;
				font-weight: bold;
			}
			.right {
				width: 100%;
				.btn {
					display: inline-block;
					height: 50rpx;
					line-height: 48rpx;
					border-radius: 50rpx;
					background-color: #6699ff;
					color: #fff;
					padding: 0px 20rpx;
					font-size: 24rpx;
					margin-right: 20rpx;
				}
				.btn_color1 {
					background-color: #ff9900;
				}
				.btn_color2 {
					background-color: #33bb99;
				}
				.btn_color3 {
					background-color: #0032B7;
				}
			}
		}
		.cell_item_btn2 {
			padding: $nr-padd;
		}
		.cell_Tre {
			display: none;
		}
		.bgred {
			background-color: transparent !important;
			color: $tom-text-color !important;
			font-weight: bold;
		}
		.red {
			color: $tom-text-red !important;
		}
		.black {
			color: $tom-text-color !important;
		}
		.blue {
			color: $text-color !important;
		}
	}
	.cell_list_active {
		height: auto;
		.cell_item_top {
			padding: $nr-padd;
			border-bottom: none;
			height: auto;
			.left {
				.u-icon {
					transform: rotate(90deg);
				}

				.celid {
					display: none;
				}
				.zkaicelid {
					display: inline-block;
					margin-left: 20rpx;
				}
			}
			.item,
			.right {
				display: none;
			}
			.zktips {
				width: 100%;
				text-align: right;
				display: inline-block;
				font-size: 30rpx;
			}
		}
		.cell_item_list {
			display: flex;
		}
		.list_exchangeCoins {
			display: flex;
		}
		.cell_item_Operation {
			display: block;
		}
		.cell_item_btn {
			display: flex;
		}
	}
	.cell_list_active2 {
		height: 634rpx;
	}
	.cell_Tre {
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		padding: 26rpx 0rpx;
		color: $tom-text-sub-color2;
		.text {
			font-size: 28rpx;
			margin-left: 10rpx;
			margin-top: -4rpx;
		}
	}
}
.cell_puls {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	color: $tom-text-sub-color2;
	background-color: #fff;
	height: 170rpx;
	border-radius: 20rpx;
	margin: 20rpx $nr-padd;
	box-shadow: $tom-block-shadow;
	.text {
		font-size: 32rpx;
		margin-left: 10rpx;
	}
}
.pop_nr {
	line-height: 0;
	.img {
		width: 630rpx;
		height: 430rpx;
	}
	.pop_nr_block {
		background-color: #fff;
		border-radius: 0rpx 0rpx 30rpx 30rpx;
		line-height: normal;
		text-align: center;
		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: $tom-text-color;
			text-align: center;
			padding: 50rpx 0rpx;
			max-width: 560rpx;
			margin: 0rpx auto;
			.red {
				color: $tom-text-red;
			}
			.green {
				color: $tom-text-green;
			}
		}
		.pop_nr_item {
			display: flex;
			align-items: center;
			padding: 0rpx 40rpx 40rpx 40rpx;
			color: $tom-text-color;
			.pop_nr_item_left {
				font-size: 28rpx;
			}
			.pop_nr_item_right {
				border: 2rpx solid $tom-text-sub-color3;
				border-radius: 8rpx;
				text-align: left;
				font-size: 24rpx;
				height: 54rpx;
				padding: 0rpx 14rpx;
				margin-left: 10rpx;
				font-weight: 400;
			}
			// .pop_nr_item_text {
			// 	font-size: 24rpx;
			// 	color: $tom-text-sub-color;
			// 	font-weight: 400;
			// 	margin-left: 10rpx;
			// }
		}
		.pop_nr_btn {
			padding: 0rpx 30rpx 40rpx 30rpx;
			display: flex;
			justify-content: space-around;
			.btn {
				display: flex;
				align-items: center;
				justify-content: space-around;
				font-size: 30rpx;
				font-weight: bold;
				background-color: $text-color;
				width: 160rpx;
				height: 80rpx;
				color: #fff;
				border-radius: 10rpx;
			}
			.btn2 {
				background-color: #fff;
				border: 1px solid $tom-text-sub-color3;
				color: $tom-text-sub-color;
			}
		}
	}
}
</style>
